import React, { Component } from 'react'

// 组件状态： hooks出现之前以类组件为主

class TestComponent extends React.Component {
    // 定义组件状态
    state = {
        name: 'zhangsan'
    }
    // 定义事件 回调函数
    changeName = () => {
        // 修改state中的属性值： 必须通过 setState 方法才能修改 state 状态中的属性值(这个方法是继承得到的)
        this.setState({
            name: 'lisi'
        })
    }
    render() {
        return (
            <div>
                this is TestComponent
                {/* 使用状态属性 */}
                name: {this.state.name}
                <button onClick={this.changeName}>change name</button>
            </div>
        )
    }
}

class Counter extends React.Component {
    constructor() {
        super()
        // 使用bind强行修正this指向， 类组件实例化阶段，将this永远指向当前组件实例
        this.handler = this.handler.bind(this)
    }

    // 定义组件状态
    state = {
        count: 0
    }
    // 定义事件 回调函数
    changeCount = () => {       // class fields 写法， 基本最好使用这个
        // react 体系下 '状态数据不可变'，所以要用 setState
        this.setState({
            count: this.state.count + 1
        })
    }
    // 当使用这种方式定义事件回调函数的时候，需要在 constructor 中进行修正, 当然还有一种修正方式：在调用的时候使用箭头函数改变this指向
    handler() {
        console.log(this)
    }
    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.changeCount}>count++</button>
                {/* 当这样修正的时候， 因为是箭头函数，这里的this指向当前render函数的实例对象，render中的this就是当前组件实例的this */}
                {/* <button onClick={() => this.handler}>count++</button> */}
            </div>
        )
    }
}

class StateComponent extends React.Component {
    // 定义组件状态
    state = {
        list: [1,2,3],
        person: {
            name: 'zhangsan'
        }
    }
    handleChange = () => {       // class fields 写法， 基本最好使用这个
        this.setState({
            list: [...this.state.list, 4, 5],
            person: {                           // 修改对象的某一属性值, 先展开原始对象，然后属性有重复的话，会以后一个为准进行覆盖
                ...this.state.person,
                name: 'lisi'
            }
        })
    }
    handleReduce = () => {
        this.setState({
            list: this.state.list.filter(item => item !== 2),
        })
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map(item => <li key={item}>{item}</li>)}
                </ul>
                <div>{this.state.person.name}</div>
                <button onClick={this.handleChange}>changeState</button>
                <button onClick={this.handleReduce}>reduce</button>
            </div>
        )
    }
}

export default class Test4_com_state extends Component {
  render() {
    return (
      <div>
        <TestComponent />
        <Counter />
        <StateComponent />
      </div>
    )
  }
}
